<template>
	<view>
		<view style="margin-top: 15rpx;">
			<jp-tabs field="name" v-model="current" corner="corners" :tabs="tabs"  @change="changeTab"></jp-tabs>
		</view>
		<view style="margin-top: 80rpx;">
			<jp-tabs :tabStyle="{
				background: '#f5f5f5',
			}" :pillsStyle="{
				background: '#23AAF2',
				borderRadius: '2px'
			}" :activeStyle="{
				color: '#fff',
				padding: '0 20rpx'
			}" field="name" pills v-model="current" corner="corners" :tabs="tabs"  @change="changeTab"></jp-tabs>
		</view>
		
		<view style="margin-top: 80rpx;">
			<jp-tabs :cornerStyle="{
				background: '#23AAF2',
				borderRadius: '50%',
				color: '#fff',
				fontSize: '12rpx',
				width: '30rpx',
				height: '30rpx'
			}" :activeStyle="{
				color: '#f00',
				padding: '0 20rpx'
			}"  :lineStyle="{
				background: '#f00',
				borderRadius: '2px',
				height: '2px',
			}" field="name" v-model="current" corner="corners" :tabs="tabs"  @change="changeTab"></jp-tabs>
		</view>
	
		
		<view style="margin-top: 80rpx;">
			<jp-tabs :pillsStyle="{
				background: '#23AAF2',
				borderRadius: '80rpx',
			}" :activeStyle="{
				color: '#fff',
				padding: '0 20rpx'
			}" pills field="name" v-model="current" corner="corners" :tabs="tabs"  @change="changeTab"></jp-tabs>
		</view>
		
		
		<view style="margin-top: 80rpx;">
			<jp-tabs :lineStyle="{display: 'none'}"  field="name" v-model="current" corner="corners" :tabs="tabs"  @change="changeTab"></jp-tabs>
		</view>
		
		
		<view style="margin-top: 80rpx;">
			<jp-tabs field="name" v-model="current" :tabs="tabs"  @change="changeTab"></jp-tabs>
		</view>
	</view>
</template>
<script>
	export default {
	  data() {
	    return {
	      current: 0,
	      tabs: [
			    { id: 0, name: '全部', disabled: false },
		        { id: 1, name: '待付款', disabled: false ,corners: 9},
				{ id: 2, name: '待收货', disabled: false },
				{ id: 3, name: '待评价', disabled: false,corners: 35 },
				{ id: 4, name: '退款/售后', disabled: false },
				{ id: 5, name: '我的订单', disabled: false }]
	    }
	  },
	  methods: {
	    changeTab(index) {
	      console.log('当前选中的项：' + index)
	    }
	  }
	}
</script>
<style>
	page{
	  
	}
</style>